<template>
  <div>
    <div id="itemtype_container">
      <div class="itemtype_title">
        <p>商品分类</p>
        <el-button type="primary" size="mini" @click="dialogVisible = true"
          >添加分类</el-button
        >
      </div>
      <!-- 列表部分 -->
      <el-table :data="list">
        <el-table-column type="index" label="序号"></el-table-column>

        <el-table-column label="分类名称">
          <template slot-scope="data">
            <label v-show="!data.row.isedit">{{ data.row.cateName }}</label>
            <el-input
              v-model="data.row.cateName"
              v-show="data.row.isedit"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column label="是否启用">
          <template slot-scope="orbtn">
            <el-switch
              :disabled="!orbtn.row.isedit"
              v-model="orbtn.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="del">
            <el-button v-show="!del.row.isedit" @click="clickfinish(del.row)"
              >编辑</el-button
            >
            <el-button
              style="margin: 0"
              @click="clicksucc(del.row)"
              v-show="del.row.isedit"
              type="success"
              >完成</el-button
            >
            <el-button type="danger" @click="clickdel(del.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 翻页部分 -->
      <div class="itemtype_container_page">
        <el-pagination
          @current-change="pagechange"
          :current-page="curpage"
          :page-size="curpagesize"
          :total="total"
          layout="total, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 添加商品部分 -->
    <div>
      <el-dialog title="添加分类" :visible.sync="dialogVisible" width="500px">
        <div style="display: flex; align-items: center">
          <span style="margin-right: 10px">分类名称</span>
          <el-input v-model="sortname" style="flex: 1"></el-input>
        </div>
        <div style="margin-top: 20px">
          <span style="margin-right: 10px">是否启用</span>
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="truebtn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { catelist, addcate, delcate, editcate } from "@/apis/items";
export default {
  data() {
    return {
      list: [
        /* cateName: "热销榜"
        id: 47
        state: 1
        isedit:false */
      ],
      value: true,
      total: 0,

      dialogVisible: false,
      sortname: "",

      curpage: 1,
      curpagesize: 5,
    };
  },

  methods: {
    //获取分类列表函数
    catedata() {
      catelist({ currentPage: this.curpage, pageSize: this.curpagesize }).then(
        (res) => {
          // console.log(res);
          for (const obj of res.data.data) {
            obj.state = obj.state == 1;
            obj.isedit = false;
          }
          this.list = res.data.data;
          this.total = res.data.total;
        }
      );
    },

    //添加分类
    truebtn() {
      addcate({ cateName: this.sortname, state: this.value }).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          this.$message({
            type: "success",
            message: "商品添加成功!",
          });

          this.dialogVisible = false;
          this.catedata();
        }
      });
      // console.log(this.value);
    },

    //删除分类
    clickdel(delid) {
      // console.log(a);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delcate({ id: delid }).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                type: "success",
                message: "账号删除成功!",
              });

              this.catedata();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //编辑分类
    clickfinish(obj) {
      // console.log(obj);
      obj.isedit = true;
    },

    //完成上传
    clicksucc(obj) {
      // console.log(obj);
      editcate({
        id: obj.id,
        cateName: obj.cateName,
        state: obj.state,
      }).then((res) => {
        console.log(res);
        obj.isedit = false;
      });
    },

    //翻页
    pagechange(newpage) {
      // console.log(newpage);
      this.curpage = newpage;
      this.catedata();
    },
  },
  created() {
    this.catedata();
  },
};
</script>

<style lang="less" scoped>
#itemtype_container {
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-bottom: 20px;
  .itemtype_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      line-height: 50px;
      border-bottom: 1px solid #f4f5f9;
      padding: 0 20px;
      color: #848485;
    }
  }

  .itemtype_container_page {
    margin: 20px 0 0 20px;
  }
}
</style>